<template>
  <div class="grid-content bg-purple">
    <div class="header">
      <p>
        待办任务
        <el-tooltip placement="top" effect="light">
          <div slot="content">待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件<br>
            待派送率=待派送/(待派送+派送中+已签收+拒收)<br>
            未分配率=未分配/全部数据<br>
            超时率=超时任务/(已完成+进行中+已取消</div>
          <img src="@/assets/wen.png" alt="">
        </el-tooltip>
      </p>
      <div class="refresh-box">2023-05-19 21:15 - 2023-05-21 23:59</div>
    </div>
    <div class="ball-chart-box">
      <el-row :gutter="20">
        <el-col :span="6"><div>
          <echarts-four :one="backlog.waitingPickupRate" />
          <div class="item"><span class="s1">待取件</span><span class="s2">{{ backlog.waitingPickupNumber }}</span></div></div>
        </el-col>
        <el-col :span="6"><div>
          <echarts-four :one="backlog.waitingDispatchRate" />
          <div class="item"><span class="s1">待派件</span><span class="ss2">{{ backlog.waitingDispatchNumber }}</span></div></div>
        </el-col>
        <el-col :span="6"><div>
          <echarts-four :one="backlog.unassignedTransportTaskRate" />
          <div class="item"><span class="s1">未分配运输</span><span class="ss3">{{ backlog.unassignedTransportTaskNumber }}</span></div></div>
        </el-col>
        <el-col :span="6"><div>
          <echarts-four :one="backlog.timeoutTransportTaskRate" />
          <div class="item"><span class="s1">超时运输</span><span class="ss4">{{ backlog.timeoutTransportTaskNumber }}</span></div></div>
        </el-col>
      </el-row>

      <!-- <echartstwo /> -->
    </div>
  </div>
</template>

<script>
// import { getWorkspace } from '@/api/dashboard'
import { mapGetters } from 'vuex'
import echartsFour from './echartsFour.vue'
export default {
  components: { echartsFour },
  data() {
    return {
      color1: '#ffe5e0',
      color2: 'e15536'
    }
  },
  computed: {
    ...mapGetters(['backlog'])
  }
  // created() {
  //   this.get()
  // },
  // methods: {
  //   async get() {
  //     const res = await getWorkspace()
  //     console.log(res)
  //     this.backlog = res.data.backlog
  //     // console.log(this.getList)
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.grid-content {
  // height: 230px;
  border-radius: 4px;
  min-height: 36px;
  font-size: 16px;
  padding: 23px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    p {
      font-size: 16px;
      font-weight: 700;
      img {
        width: 20px;
        height: 20px;
        margin-left: 6px;
      }
    }
  }
  .ball-chart-box {
    position: relative;
    width: 596px;
    height: 208px;
    padding: 0px;
    margin-top: 10px;
    margin-left: -10px;
    border-width: 0px;
    .item{
      margin-top: 15px;
      text-align: center;
      font-weight: 700;
      font-size: 16px;
      .s1{
      margin-right: 7px;
      color: #303133;
    }
    .s2{
      color: #e15536;
    }
    .ss2{
      color: #ffc257;
    }
    .ss3{
      color: #ff9739;
    }
    .ss4{
      color: #dfcb59;
    }
    }
  }
}
</style>
